<template>
  <div class="icon-list" :style="positionStyle">
    <div v-show="!iconsVisible" class="icon-hold" @click="showIcons(true)">{{ $t('LEGEND') }}</div>
    <div v-show="iconsVisible" class="list">
      <div class="text-right mb-20">
        <i class="iconfont icon-AFShome-hide pointer" @click="showIcons(false)" />
      </div>
      <div class="icon-content">
        <div class="flex align-center icon-item">
          <div class="icon-img">
            <img src="@/assets/img/topo/normal.png">
          </div>
          <div class="icon-label">{{ $t('ORDINARY_SITE') }}</div>
        </div>
        <div class="flex align-center icon-item">
          <div class="icon-img">
            <img src="@/assets/img/topo/afs_normal.png">
          </div>
          <div class="icon-label">{{ $t('WITH_AFS_SITE') }}</div>
        </div>
        <div class="flex align-center icon-item">
          <div class="icon-img">
            <img src="@/assets/img/topo/light_delivery_normal.png">
          </div>
          <div class="icon-label">{{ $t('ONU') + $t('STATION') }}</div>
        </div>
        <div class="flex align-center icon-item">
          <div class="icon-img">
            <img src="@/assets/img/topo/aocc_normal.png">
          </div>
          <div class="icon-label">{{ $t('NODE_TYPE_AOCC') }}</div>
        </div>
        <div class="flex align-center icon-item">
          <div class="icon-img">
            <img src="@/assets/img/topo/cluster_normal.png">
          </div>
          <div class="icon-label">{{ $t('NODE_AFS_CLUSTER') + $t('STATION') }}</div>
        </div>
        <!-- <div class="flex align-center icon-item">
          <div class="icon-img">
            <img src="@/assets/img/topo/virtual_normal.png">
          </div>
          <div class="icon-label">{{ $t('PIPELINE_SITE') }}</div>
        </div> -->
        <div class="flex align-center icon-item">
          <div class="icon-img">
            <i class="iconfont icon-AFShome-cable text-danger" />
          </div>
          <div class="icon-label">{{ $t('FAIL') }}{{ $t('OPTICAL_CABLE') }}</div>
        </div>
        <div class="flex align-center icon-item">
          <div class="icon-img">
            <i class="iconfont icon-AFShome-cable" style="color:#00A084" />
          </div>
          <div class="icon-label">{{ $t('OPTICAL_CABLE') }}</div>
        </div>
      </div>
    </div>
    <div class="flex ml-10 alarm-bar">
      <div v-for="i in 4" :key="i" class="flex align-center ml-10 pointer" @click="changeAlarm(i)">
        <div
          class="alarm-icon mr-5"
          :style="{
            backgroundColor: disabledAlarmLevel.includes(i) ? '#ccc' : defaultAlarmColor[i]
          }"
        />
        <div class="text-color">
          {{ $t('ALARM_LEVEL_' + i) }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { defaultAlarmColor } from '@/utils/common'

  export default {
    props: {
      iconsVisible: {
        type: Boolean,
        default: false
      },
      fullScreen: {
        type: Boolean,
        default: false
      },
      staticsItem: {
        type: Object,
        default: () => {
          return {
            width: 0,
            height: 0
          }
        }
      }
    },
    data() {
      return {
        defaultAlarmColor: defaultAlarmColor,
        disabledAlarmLevel: []
      }
    },
    computed: {
      ...mapGetters(['hideAlarmLevel']),
      positionStyle() {
        return this.fullScreen
          ? {
            left: '10px',
            bottom: '40px'
          }
          : {
            left: this.staticsItem.width + 5 + 'px',
            bottom: this.staticsItem.height + 38 + 'px'
          }
      }
    },
    watch: {
      hideAlarmLevel(newVal) {
        this.disabledAlarmLevel = newVal
      }
    },
    created() { },
    methods: {
      changeAlarm(level) {
        const index = this.disabledAlarmLevel.findIndex(i => i === level)
        if (index === -1) {
          this.disabledAlarmLevel.push(level)
        } else {
          this.disabledAlarmLevel.splice(index, 1)
        }
        this.$store.commit('setAlarmLevel', this.disabledAlarmLevel)
      },
      showIcons(data) {
        this.$emit('update:iconsVisible', data)
      }
    }
  }
</script>
<style lang="scss" scoped>
@import '@/assets/css/mixin.module.scss';

.icon-list {
  position: absolute;
  left: 10px;
  bottom: 35px;
  display: flex;
  align-items: flex-end;
  z-index: 1;
  transition: all 0.5s;

  .icon-hold {
    width: 0.425rem;
    height: 0.425rem;
    font-size: 14px;
    text-align: center;
    line-height: 0.425rem;
    border-radius: 3px;
    cursor: pointer;

    @include themeify {
      color: themed('pageActiveFontColor');
      border:1px solid themed('mainColor');
      background:  themed('mainColor');
    }
  }

  .list {
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;

    @include themeify {
      box-shadow: themed('legendBoxShadow');
      background-color: themed('legendBgColor');
      border: 1px solid themed('legendBorderColor');
      color: themed('legendFontColor');
    }
  }

  .icon-content {
    border-bottom: 0;

    @include themeify {
      border: 1px solid themed('borderColor');
    }

    .icon-item {
      box-sizing: border-box;
      @include themeify {
        border-bottom: 1px solid themed('borderColor');
      }

      .icon-img {
        width: 48px;
        text-align: center;
        img,
        .iconfont {
          width: 18px;
          height: 18px;
          font-size:20px;
        }
      }

      .icon-label {
        flex: 1;
        padding: 5px 10px;

        @include themeify {
          border-left: 1px solid themed('borderColor');
        }

        .el-checkbox {
          display: flex;
          flex-direction: row-reverse;
          justify-content: space-between;
          align-items: center;

          ::v-deep(.el-checkbox__label) {
            padding: 0 10px 0 0;
            line-height: 14px !important;
            height: 14px !important;
            min-height: 14px !important;
          }
        }
      }
    }
  }

  .alarm-icon {
    display: inline-block;
    width: 18px;
    height: 12px;
  }

  .alarm-bar {
    height: 34px;
    padding: 0 10px 0 0;
    border-radius: 3px;
    font-size: 14px;

    @include themeify {
      color: themed('pageActiveFontColor');
      border:1px solid themed('legendBorderColor');
      background:  themed('legendBgColor');
    }
  }
}
</style>
